<script>

import BlogDetailComponent from '@/components/BlogDetailComponent.vue'
import LayoutComponent from '@/components/LayoutComponent.vue'

export default {
  name: 'BlogDetailView',
  components: { LayoutComponent, BlogDetailComponent },
  data () {
    return {
      blog: {},
      blogId: '',
      comment: {},
      rules: {
        name: [{ required: true, message: '请输入评论人姓名' }],
        content: [{ required: true, message: '请输入评论内容' }]
      },
      pageInfo: {
        page: 1,
        total: 0
      },
      commentList: []
    }
  },
  methods: {
    getBlogId () {
      this.blogId = this.$route.params.blogId
      if (!this.blogId) {
        this.$message.error('数据异常')
        this.$router.replace('/')
      }
    },
    getCommentList () {
      this.$axios.get(`api/blog/${this.blogId}/comment/${this.pageInfo.page}`).then(data => {
        this.commentList = [...data.records]
        this.pageInfo.total = data.total
      }).catch(e => e)
    },
    getBlog () {
      this.$axios.get('api/blog/' + this.blogId).then(data => {
        this.blog = { ...data }
      }).catch(e => e)
    },
    updateReadCount () {
      this.$axios.post('api/blog/read/count/' + this.blogId).catch(e => e)
    },
    submitComment () {
      this.$refs.commentFormRef.validate(valid => {
        if (valid) {
          this.comment.blogId = this.blogId
          this.$axios.put('api/blog/comment/save', this.comment).then(() => {
            this.$message.success('评论成功！')
            this.$refs.commentFormRef.resetFields()
            this.pageInfo.page = 1
            this.getCommentList()
          }).catch(e => e)
        }
      })
    },
    currentChange (val) {
      this.pageInfo.page = val
      this.getCommentList()
    }
  },
  created () {
    this.getBlogId()
    this.getBlog()
    this.updateReadCount()
    this.getCommentList()
  }
}
</script>

<template>
  <layout-component>
    <div class="blog" style="width: 100%">
      <blog-detail-component :blog="blog"/>
      <div v-if="blog.hasComment === 1">
        <el-divider>评论区</el-divider>
        <el-form :model="comment" :rules="rules" ref="commentFormRef" label-width="100px">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="comment.name" placeholder="请输入评论人姓名"/>
          </el-form-item>
          <el-form-item label="内容" prop="content">
            <el-input type="textarea" v-model="comment.content" placeholder="请输入评论内容" maxlength="300" :rows="5" show-word-limit/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitComment">发表评论</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div v-else>
        <el-divider>暂不支持评论！</el-divider>
      </div>
      <div class="comment-list" v-if="commentList.length>0">
        <el-divider>评论列表</el-divider>
        <div class="comment-item" v-for="comment in commentList" :key="comment.commentId">
          <div class="comment-info">
            <h3>{{comment.name}}</h3>
            <p>评论时间：{{comment.commentTime}}</p>
          </div>
          <div class="comment-content">
            <p v-text="comment.content"></p>
          </div>
        </div>
        <el-pagination style="width: 90%;margin: 10px auto;text-align: center" :total="pageInfo.total" :page-size="5" @current-change="currentChange" background hide-on-single-page/>
      </div>
    </div>
  </layout-component>
</template>

<style scoped lang="scss">
.comment-list{
  .comment-item{
    width: 90%;
    margin: 20px auto;
    .comment-info{
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .comment-content{
      border-left: 4px solid #539058;
      padding-left: 20px;
    }
  }
}
</style>
